<template>
  <view class="agreement-wrapper">
<button class="agree-item" id="agree-btn" open-type="agreePrivacyAuthorization"
            @agreeprivacyauthorization="handAgree">
    <view class="agreement-garden" :class="[selected ? 'selected' : '']" @tap="selected = !selected"></view>
</button>
    同意
    <view @tap="toPage('/pages/login/serviceAgreement')"> 《用户服务协议》 </view>
    与
    <view @tap="toPrivacy"> 《隐私政策》 </view>
  </view>
  <JButton pdTop="0" @HandleTouch="login" bottom="30rpx">登录</JButton>
  <view class="register-wrapper">
    <view v-if="isRegister">还没有账号？<text @tap="register.open()">去注册</text> </view>
    <view v-if="forgotPassword"><text @tap="jumpPage">忘记密码</text></view>
  </view>
  <JRegister ref="register"></JRegister>
  <JAgree service="/pages/login/serviceAgreement" privacy="/pages/login/privacyPolicy" ref="refAgr" @agree="selected = true"/>
</template>

<script setup>
import { ref ,reactive} from "vue"
import JButton from "@/components/newComponents/JButton/JButton"
import JRegister from "./JRegister.vue"
import { clearRulesArray } from "@/hooks/rules"
const register = ref(null)
const vdata = reactive({})
const props = defineProps({
  forgotPassword: {
    type: Boolean,
    default: false,
  },
  isRegister: {
    type: Boolean,
    default: false,
  },
})
const refAgr = ref(null)
const selected = ref(false)
const emits = defineEmits(["login"])

const login = () => {
  if (!selected.value)
    return refAgr.value.open()
  emits("login")
}
const toPage = (url) => {
  uni.navigateTo({ url })
}
const jumpPage = () => {
  clearRulesArray()
  uni.navigateTo({ url: "/pages/login/forgetPassword" })
}
// 隐私政策页面
const toPrivacy = () => {
    // #ifdef APP-PLUS  
    uni.navigateTo({
        url: '/pages/login/privacyPolicy',
    })
    // #endif

    // #ifdef MP-WEIXIN
    wx.openPrivacyContract(
        {
            fail: () => {
                uni.showToast({
                    title: '打开失败请稍后重试', // 打开失败
                    icon: 'none'
                })
            },
        }
    )
    // #endif
}
// #ifdef MP-WEIXIN
const getPrivacy = () => {
    wx.getPrivacySetting({
        success: (r) => {
            Object.assign(vdata, r)
            if (vdata.needAuthorization) {
                wx.onNeedPrivacyAuthorization(res => {
                    vdata.resolve = res
                })
            }
        }
    })
}
getPrivacy()
// #endif
const handAgree = () => {
    // #ifdef MP-WEIXIN
    if (vdata.needAuthorization) {
        vdata.resolve({ buttonId: 'agree-btn', event: 'agree' })
    }
    // #endif
}

</script>

<style lang="scss" scoped>
.agreement-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
//   width: 100%;
  font-size: 24rpx;
  white-space: nowrap;
  color: #8c8c8c;
  view {
    margin: 0 10rpx;
    color: $primaryColor;
  }
  .agreement-garden {
    position: relative;
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    border: 2rpx solid $primaryColor;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block;
      width: 80%;
      height: 80%;
      border-radius: 50%;
    }
  }
}
.selected::after {
  background-color: $primaryColor;
}

.register-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  letter-spacing: 0.02em;

  view {
    margin: 0 50rpx;
    color: #8c8c8c;
    text {
      color: #7737fe;
    }
  }
}
.agree-item {
    padding: 0;
    margin: 0;
    line-height: 0;
    border-radius: 0;
    background-color: transparent;
    &::after{
        display: none;
    }
}
</style>
